<template>
  <div>
    <Header></Header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">

            <el-row class="tac">
              <el-col :span="24">
                <h2>账号设置</h2>
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  >
                  <el-menu-item >
                    <i class="el-icon-setting"></i>
                    <span slot="title" @click="updateInfo">修改信息</span>
                  </el-menu-item>
                  <el-menu-item >
                    <i class="el-icon-setting"></i>
                    <span slot="title" @click="updatePassword">修改密码</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
        </el-aside>
        <!-- 主页 -->
        <el-main>
          
          <el-form style="display:block" id="updateInfoTab" ref="form" :model="user"  label-width="140px">
            <el-card  >
              <header slot="header">基本信息</header>
              <el-form-item label="用户名" prop="user.content.name">
                <el-input v-model="user.content.name" type="text" maxlength="10" show-word-limit />
              </el-form-item>

              <el-form-item label="头像" prop="user.content.portrait"> 
                <!-- 使用图片上传组件,完成图片上传 -->
                <upload-image
                  :content="user.content.portrait && [user.content.portrait]"
                  :get-urls="getCourseImgUrl"
                  uploadUrl="http://localhost:80/upload"
                  ref="courseCoverRef"
                  max="10M"
                  tipInfo="建议尺寸：230*300px，JPG、PNG格式，图片小于10M"
                ></upload-image>
              </el-form-item>
            </el-card>

            <div class="actions">
              <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
          </el-form>

          <el-form style="display:none" id="updatePasswordTab" ref="form" :model="user"  label-width="140px">
            <el-card  >
              <header slot="header">修改密码</header>
              <el-form-item label="原密码" >
                <el-input v-model="oldPaaword" type="password"  show-word-limit />
              </el-form-item>
              <el-form-item label="新密码" >
                <el-input v-model="newPassword" type="password"  show-word-limit />
              </el-form-item>
            </el-card>

            <div class="actions">
              <el-button type="primary" @click="handleSavePassword">保存</el-button>
            </div>
          </el-form>

        </el-main>
      </el-container>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条
import UploadImage from "./UploadImage.vue"; //上传图片组件

export default {
  name: "Index",
  components: {
    Header,
    Footer,
    UploadImage
  },
  data() {
    return {
      user:null, // 已登录的用户对象信息
      oldPaaword:"", //旧密码
      newPassword:"", //新密码
    };
  },
  created() {
    //从本地缓存中获取用户信息
    this.user = JSON.parse( localStorage.getItem("user") );
    console.log(this.user.content)
    
  },
  methods: {
    updateInfo(){
      document.getElementById("updatePasswordTab").style.display = "none";
      document.getElementById("updateInfoTab").style.display = "block";
    },
    updatePassword(){
      document.getElementById("updateInfoTab").style.display = "none";
      document.getElementById("updatePasswordTab").style.display = "block";
    },
    //更新密码
    handleSavePassword(){
      if (this.oldPaaword == "") {
        this.$message.error("原密码不能为空！请重新输入！");
       return 
      }
      if (this.newPassword == "") {
        this.$message.error("新密码不能为空！请重新输入！");
        return 
      }
      if (this.oldPaaword != this.user.content.password) {
        this.$message.error("您输入的原密码不正确！请重新输入！");
        return 
      }
      
      //更新用户密码
        this.axios
      .post("http://localhost:80/user/updatePassword",{
        id: this.user.content.id, 
	      password: this.newPassword
      })
      .then( (result)=>{
        this.$message.success("修改用户密码成功！请重新登录！");
        this.user.content.password = this.newPassword;
        localStorage.setItem("user", null);
        this.$router.push("/"); //回到首页
      })
      .catch( (error)=>{
        this.$message.error("修改用户密码失败！");
      });

    },
    //获取图片路径,进行回显
    getCourseImgUrl(urls) {
      console.log("获取到图片")
      console.log(urls)
      if (urls.length > 0) {
         this.user.content.portrait = urls && urls[0].filePath;
      }
    },
    handleSave(){
        //更新用户昵称和头像
        this.axios
      .post("http://localhost:80/user/updateUserInfo",{
        id: this.user.content.id, 
	      portrait: this.user.content.portrait, 
	      name:this.user.content.name
      })
      .then( (result)=>{
        this.$message.success("修改用户信息成功！");
        localStorage.setItem("user", JSON.stringify(this.user));
        this.$router.push("/"); //回到首页
      })
      .catch( (error)=>{
        this.$message.error("更新用户信息失败！");
      });


    }
  },
  
};
</script>

<style lang="less" scoped>
@import "../assets/less/common.less";


p {
  margin-top: 0;
}
li {
  list-style: none;
}
flex {
  display: flex;
}
.btn(@a, @b) {
  background-color: @a;
  color: @b;
  border: 1px solid @a;
}
.course-ads {
  margin-bottom: 20px;
  cursor: pointer;
  width: 100%;
  max-height: 280px;
  overflow: hidden;
  img {
    width: 100%;
    border-radius: 2px;
  }
}
.tab-container {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #ededed;
}
.vux-tab.course-tab {
  box-sizing: border-box;
  height: 60px;
  width: 200px;
  overflow: hidden;
  font-size: 20px;
  .vux-tab-container {
    width: 260px;
  }
  .vux-tab-item {
    cursor: pointer;
    background: none;
    line-height: 60px;
    font-size: 20px;
  }
  .vux-tab-ink-bar {
    bottom: -1px;
    .vux-tab-bar-inner {
      height: 2px;
    }
  }
}
.tab-container {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #ededed;
}
.course-ul {
  padding: 0 20px;
}
.hover-pointer {
  cursor: pointer;
}
.course-ul-pc .course-li {
  padding: 30px 0 40px 0;
  border-bottom: 1px solid #ededed;
  position: relative;
  &:last-child {
    border-bottom: 0;
  }
}
.current-price {
  font-size: 12px;
  color: #999;
  font-weight: 600;
  text-decoration: line-through;
}
.current-price-unite {
  font-size: 12px;
  margin-right: -4px;
}
.p-author-line {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  position: absolute;
  background: #999;
  margin-left: 5px;
  top: 3px;
}
.teacher-portrait {
  width: 121px;
  height: 159px;
  border-radius: 4px;
  float: left;
}
.content-main {
  line-height: 1.4;
  margin-left: 141px;
  position: relative;
  height: 150px;
}
.content-main .p-title {
  font-size: 20px;
  color: #333;
  font-family: PingFangSC-Medium, PingFang SC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 350px;
}
.course-ul-pc .content-main .p-title-buy {
  font-size: 12px;
  color: #999;
  display: inline-block;
  margin-top: 6px;
  position: relative;
  float: right;
  top: -28px;
  font-weight: 400;
}
p {
  margin-top: 0;
}
.course-ul-pc .p-author-line {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  position: absolute;
  background: #999;
  margin-left: 5px;
  top: 3px;
}
.text-overflow {
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.course-ul-pc .content-main .p-describe {
  font-size: 14px;
  margin-top: 5px;
  color: #333;
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.course-ul-pc .content-main .p-author-span:not(:first-child) {
  margin-left: 18px;
}
.course-ul-pc .content-main .content-course {
  font-size: 14px;
  padding-top: 25px;
  color: #666;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.course-ul-pc .content-main .content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}
.course-ul-pc .content-main .content-course .free-label {
  width: 50px;
  height: 16px;
  margin: 1px 5px 0 0;
}
.course-ul-pc .content-main .content-course-lesson:nth-child(2n) {
  margin-right: 0;
}

.course-ul-pc .content-main .content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}
.course-ul-pc .content-main .content-price {
  height: 28px;
  line-height: 28px;
  position: absolute;
  width: 100%;
  bottom: -4px;
}
.course-ul-pc .content-main .content-price-p {
  font-size: 0;
}
.course-ul-pc .content-main .content-price-orange-sm {
  color: #ff7452;
  font-size: 14px;
}

.content-course {
  font-size: 14px;
  padding-top: 25px;
  color: #666;
}
.content-course.free-label {
  width: 50px;
  height: 16px;
  margin: 1px 5px 0 0;
}

.content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}
.content-course-lesson:nth-child(2n) {
  margin-right: 0;
}
.disabled-word {
  color: #999;
  cursor: default;
}
.theme-span :hover {
  color: #0abf89;
}

.content-price-p {
  font-size: 0;
}
.content-price-orange {
  color: #ff7452;
  font-size: 20px;
}
.content-price-buy {
  font-size: 14px;
  color: #999;
  margin-left: 20px;
  transform: translate(8px, -2px);
  display: inline-block;
}
.content-price-grey {
  color: #999;
  font-size: 12px;
  margin-left: 5px;
}
.content-price-buyed {
  color: #999;
  font-size: 14px;
}
.content-price {
  height: 28px;
  line-height: 28px;
  position: absolute;
  width: 100%;
  bottom: -4px;
}
.activity-name {
  font-size: 12px;
  line-height: 14px;
  color: rgba(255, 255, 255, 1);
  padding: 2px 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 137, 110, 1) 0%,
    rgba(255, 123, 92, 1) 100%
  );
  border-radius: 2px;
  display: inline-block;
  transform: translate(6px, -3px);
}
.p-title {
  font-size: 20px;
  color: #333;
  font-family: PingFangSC-Medium, PingFang SC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 350px;
}
.p-title-dec {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.p-title-buy {
  // .font(12px);
  font-size: 12px;
  color: #999;
  display: inline-block;
  margin-top: 6px;
  position: relative;
  // .fr;
  top: -28px;
  font-weight: normal;
}

.companion-reading {
  background: rgba(0, 179, 138, 0.06);
  border-radius: 2px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #00b38a;
  display: inline-block;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  margin-left: 10px;
  vertical-align: text-bottom;
  position: relative;

  .triangle {
    position: absolute;
    top: 12px;
    left: -3px;
    width: 0;
    height: 0;
    content: "";
    border: 5px solid;
    border-color: transparent transparent white white;
    transform: rotate(45deg);
    box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.08);
  }
}
.companion-tip {
  display: none;
  position: absolute;
  font-family: HiraginoSansGB-W3;
  font-size: 14px;
  color: #777777;
  background: #ffffff;
  border: 1px solid #e3ebe9;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  line-height: 29px;
  top: -7px;
  word-break: keep-all;
  left: 80px;
  padding: 0 10px;
  width: 200px;
  z-index: 2;
}
.companion-reading:hover .companion-tip {
  display: inline-block;
}
.companion-reading:hover .companion-tip {
  display: block;
}
.p-describe {
  // .font(14px);
  font-size: 14px;
  margin-top: 5px;
  color: #333;
  // .text-overflow;
}
.p-author + p {
  margin-top: 0;
}
.p-author {
  margin: 10px 0 5px 0;
  // .font(12px);
  font-size: 12px;
  color: #999;
  position: relative;

  .p-author-line {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    position: absolute;
    background: #999;
    margin-left: 5px;
    top: 3px;
  }
}
.p-author-span:not(:first-child) {
  margin-left: 18px;
}

.course-ul-container {
  width: 850px;
  display: inline-block;
  float: left;
}
.course-ul {
  padding: 0 20px;
}
.course-ul-pc {
  width: 790px;
  background-color: #fff;
  padding: 0 30px;
  // .fl;
}
.tag-icon {
  width: 57px;
  height: 18px;
  position: absolute;
  top: 30px;
  left: 0;
}

.more-icon {
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
.btn {
  width: 94px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 14px;
  box-sizing: content-box;
  &-green {
    .btn(#00b38a, #fff);
    &:hover {
      background: #00a57f;
      border-color: #00a57f;
    }
  }
  &-yellow {
    .btn(#fcd766, #fff);
    &:hover {
      background: #f0d071;
      border-color: #f0d071;
    }
  }
  &-white {
    .btn(#fff, #00b38a);
    border: 1px solid #00b38a;
    &:hover {
      color: #fff;
      border-color: #00b38a;
      background-color: #00b38a;
    }
  }
  &-offset {
    position: absolute;
    right: 0;
    top: -4px;
  }
}

.btn-center {
  margin: 10px auto;
}

.no-data-title {
  font-size: 20px;
  color: #333;
  font-weight: 500;
}
</style>
